import { Skeleton, Typography, styled } from '@mui/material'
import Card from '../components/cardlist/card'
import { ImageType } from '../components/cardlist/image'
import { useAppSelector } from '../hooks'
import { selectUser } from '../store/reducers/selectors'
import { useGetAllProductsQuery } from '../api/productsApiSlice'
import { DEFAULT_ITEMS_PER_PAGE } from '../store/reducers/slices/paginationSlice'
import { GoBackButton } from '../components/shared/goBackButton'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
	marginBottom: '20px',
}))

const StyledCardlist = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'row',
	width: '992px',
	height: 'auto',
	marginTop: '20px',
	gap: '15px',
	flexWrap: 'wrap',
}))

const Favorites = () => {
	const user = useAppSelector(selectUser)
	const { data, isLoading } = useGetAllProductsQuery()

	const skeletonItems = Array.from(
		{ length: DEFAULT_ITEMS_PER_PAGE },
		(_, i) => i + 1
	)

	return (
		<StyledContainer>
			<GoBackButton />
			<StyledHeader>Избранное</StyledHeader>
			<StyledCardlist>
				{isLoading &&
					skeletonItems.map((item) => (
						<Skeleton key={item} variant='rounded' width={236} height={359} />
					))}
				{data?.allProducts
					?.filter((product) => product.likes.includes(user ? user._id : ''))
					.map(
						({ _id, pictures, stock, discount, price, wight, name, likes }) => (
							<Card
								key={_id}
								_id={_id}
								pictures={pictures}
								stock={stock}
								discount={discount}
								discountPrice={price * (1 - discount / 100)}
								price={price}
								wight={wight}
								name={name}
								likes={likes}
								type={ImageType.favorites}
							/>
						)
					)}
			</StyledCardlist>
		</StyledContainer>
	)
}

export default Favorites
